<template>
  <div class="shop-car">
    <!-- top信息 -->
    <div class="top">
      <div class="title">购物车</div>
      <div class="shopping-info">
        <div class="shopping-info-left">
          <div class="num">用餐人数{{info.person_number}}人</div>
          <!-- <div class="remarks">备注：无</div> -->
        </div>
        <!-- <div class="shopping-info-right">
          <i class="edit-icon"></i>
          <span class="edit-text">修改</span>
        </div> -->
      </div>
      <div class="shop-count">
        <div class="shop-count-left">
          <span class="text">购物车里有:</span>
          <span class="quantity" >菜品{{info.food_num}}个</span>
          <span class="count">合计：￥{{info.all_amount}}</span>
        </div>
        <!-- <div class="shop-count-right">
          <i class="delete-icon"></i>
          <span class="delete-text">删除</span>
        </div> -->
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="shop-list-box">
      <div class="title">菜单</div>
      <div class="shop-list" v-if="shopCartList.length > 0" v-for="(item,index) in shopCartList" :key="index">
        <div class="shop-list-left">
          <div class="shop-image">
            <img :src="item.goods_product.thumb_url" class="avatar">
            <!-- <span>用户名称称</span> -->
          </div>
          <div class="shop-info">
            <div class="shop-name">{{item.goods_product.name}}</div>
            <div style="width:100px;text-align:left;font-size:14px">{{item.spu_name}}</div>
            <div class="shop-price">￥{{item.spu_price}}</div>
          </div>
        </div>
        <div class="shop-list-right">
          <van-stepper v-model="item.num" @change="setShopNum(item)" :disabled="disabled" min="0"/>
        </div>
      </div>
    </div>

    <!-- 刷新 -->
    <!-- <div class="refresh">
      <img src="../../assets/images/refresh.png">
    </div> -->

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="bottom-nav-menu" @click="routerToHome">
        <img src="../../assets/images/menu.png">
        <span>继续点菜</span>
      </div>
      <div class="bottom-nav-order" @click="buildOrdersH5">
        <img src="../../assets/images/order.png">
        <span>下单</span>
      </div>
    </div>
    <div class="mask-img"></div>
    <div class="mask"></div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data(){
    return{
      shopCartList: [],
      setShopNumflag: true,
      info: '',
      disabled: false,
    }
  },
  filters:{
    warpPrice(value){
      return value.toFixed(2)
    }
  },
  mounted(){
    this.getShopCartList();
  },
  methods:{
    //下单
    async buildOrdersH5(){
      Toast.loading({   mask: true,   message: '下单中...' });
      let params = {
        seat_num:this.$currency.getCookie('zhuoNum'),
        cart_num:this.$currency.getCookie('shopCarNum'),
      }
      if(!this.$currency.getCookie('shopCarNum')){
        Toast({ message: '请先填写人数和桌号' ,duration: 1500});
        return
      }
      if(this.shopCartList == 0){
        Toast({ message: '购物车无商品' ,duration: 1500});
        return
      }
      let res = await this.$api.buildOrdersH5(params);
      Toast.clear();
      if(res.level == "success"){
        this.$currency.delCookie('zhuoNum');
        this.$currency.delCookie('shopCarNum');
        Toast({ message: res.message ,duration: 1500});
        this.$currency.setCookie('orderNum', res.data.order_num)
        this.$router.push({
          path: '/order',            
        })
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //获取购物车列表
    async getShopCartList(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        cart_num:this.$currency.getCookie('shopCarNum')
      }
      let res = await this.$api.getShopCartList(params);
      Toast.clear();
      if(res.level == "success"){
        this.shopCartList = res.data;
        this.info = res.info;
        this.disabled = false;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //购物车设置菜品数量
    async setShopNum(item){
      Toast.loading({   mask: true,   message: '加载中...' });
      this.disabled = true;
      let params = {
        seat_number: this.$currency.getCookie('zhuoNum'),
        goods_id: item.goods_product.id,
        cart_num: this.$currency.getCookie('shopCarNum'),
        num: item.num,
        spu_id: item.goods_spu_id
      }
      let res = await this.$api.saveShopCartH5(params);
      Toast.clear();
      if(res.level == "success"){
        
        this.StyleVisible = false;
        this.getShopCartList()
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //跳转首页
    routerToHome(){
      this.$router.push({
        name: 'Home',
        params: {
          clearFlag: true
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .shop-car{
    min-height: 100vh;
    padding: 18px;
    padding-bottom: 120px;
    position: relative;
    .mask-img{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(../../assets/images/bg_meishi.jpg);
      filter: blur(34px);
      z-index: -2;
    }
    .mask{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(151, 148, 148, 0.7);
      z-index: -1;
    }
    .top{
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .title{
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 32px;
        border-bottom: 1px #cccc solid;
      }
      .shopping-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: 1px #cccc solid;
        .shopping-info-left{
          div{
            text-align: left;
          }
          .num{
            color: #d94445;
            font-size: 28px;
            line-height: 50px;
          }
          .remarks{
            line-height: 40px;
            font-size: 24px;
          }
        }
        .shopping-info-right{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .edit-icon{
            width: 40px;
            height: 40px;
            background-image: url('../../assets/images/shop_car_edit.png');
            background-repeat: no-repeat;
            background-size: 40px 40px;
            background-position: center center;
          }
          .edit-text{
            color: #3578cd;
          }
        }
      }
      .shop-count{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .shop-count-left{
          font-size: 28px;
          .text,
          .quantity{
            color: #3578cd;
          }
          .count{
            color: #d94445;
          }
        }
        .shop-count-right{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .delete-icon{
            width: 40px;
            height: 40px;
            background-image: url('../../assets/images/shop_car_delete.png');
            background-repeat: no-repeat;
            background-size: 40px 40px;
            background-position: center center;
          }
          .delete-text{
            color: #969696;
          }
        }
      }
    }
    .shop-list-box{
      margin-top: 20px;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .title{
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 32px;
        border-bottom: 1px #cccc solid;
        color: #4478cd;
      }
      .shop-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px #cccc solid;
        .shop-list-left{
          display: flex;
          justify-content: center;
          align-items: center;
          .shop-image{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .avatar{
              width: 120px;
              height: 120px;
              border-radius: 50%;
            }
            // span{
            //   width: 110px;
            //   line-height: 50px;
            //   overflow: hidden;
            //   text-overflow:ellipsis;
            //   white-space: nowrap;
            //   font-size: 24px;
            // }
          }
          .shop-info{
            margin-left: 30px;
            .shop-name{
              width: 260px;
              font-size: 32px;
              line-height: 60px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            .shop-price{
              width: 180px;
              line-height: 60px;
              color: #d94445;
              font-size: 28px;
              text-align: left;
            }
          }
        }
        .shop-list-right{
          display: flex;
          justify-content: center;
          align-items: center;
          .less,
          .add{
            width: 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-size: 40px 40px;
            background-position: center center;
            border: 2px solid #ccc;
            border-radius: 6px;
            padding: 8px;
          }
          .less{
            background-image: url('../../assets/images/less.png');
          }
          .add{
            background-image: url('../../assets/images/add.png');
          }
          .num{
            width: 80px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 28px
          }
        }
      }
    }
    .refresh{
      position: fixed;
      top:18px;
      right: 18px;
      width: 70px;
      height: 70px;
      background-color: rgba(0,0,0,.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    .bottom-nav{
      position: fixed;
      bottom: 20px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .bottom-nav-menu,
      .bottom-nav-order{
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background-color: rgba(253, 5, 5 ,.7);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 4px solid #fff;
        padding: 12px;
        font-size: 24px;
        img{
          width: 50px;
          height: 50px;
        }
      }
    }
  }
</style>
